<template>
  <div class="wrap">
    <div class="banner">
      <a href="#">
        <img src="../assets/img/ad.4c6b6225.png" alt="" />
      </a>
    </div>
    <div class="filter">
      <ul>
        <li>排序：</li>
        <li
          :class="{ active: sortindex === index }"
          v-for="(item, index) in sortList"
          :key="index"
          @click="getBySort(item, index)"
        >
          {{ item.text }}
        </li>
      </ul>
      <ul>
        <li>分类：</li>
        <li @click="getByCategory(0)" :class="{ active: params.type === 0 }">
          全部
        </li>
        <li @click="getByCategory(1)" :class="{ active: params.type === 1 }">
          实物商品
        </li>
        <li @click="getByCategory(2)" :class="{ active: params.type === 2 }">
          虚拟商品
        </li>
      </ul>
    </div>
    <comp1 :recommods="product" />
    <p v-show="isshowpage" style="text-align: center; margin-top: 20px">
      <i class="iconfont icon-loading"></i>
      加载中...
    </p>
  </div>
</template>
<script>
import comp1 from "@/views/components/comp1.vue";
import { getproductsapi } from "@/request/api";
import { getClientHeight, getScrollTop, getScrollHeight } from "@/untis/index";
const sortList = [
  {
    text: "全部",
    min: 0,
    max: 0,
  },
  {
    text: "我能兑换的",
    min: 0,
    max: 0,
    // 表示只有当登录才能点击
    requireLogin: true,
  },
  {
    text: "0-500分",
    min: 0,
    max: 500,
  },
  {
    text: "500-1000分",
    min: 500,
    max: 1000,
  },
  {
    text: "1000-1500分",
    min: 1000,
    max: 1500,
  },
  {
    text: "1500-2500分",
    min: 1500,
    max: 2500,
  },
];
export default {
  data() {
    return {
      product: [],
      isshowpage: false,
      sortindex: 0,
      pages: 0,
      list: [],
      params: {
        // 筛选的最小值

        min: 0,
        // 筛选的最大值
        max: 0,
        // 筛选的类型 0 -全部 ，1-实物 ，2-虚拟
        type: 0,
        // 搜索的关键字
        keyword: "",
      },
    };
  },
  components: {
    comp1,
  },
  created() {
    this.params.keyword = this.$route.query.key;
    // console.log(this.params.keyword, "create");
    this.goods();
  },
  methods: {
    getByCategory(i) {
      // 全部，虚拟，实物
      this.params.type = i;
      //   console.log(this.params.type);
      this.goods();
    },
    getBySort(item = {}, index = 0) {
      // 验证是否登录之后才可以访问的接口
      if (item.requireLogin && !this.$store.state.shopshow) {
        this.$store.dispatch("asynctoasts", {
          toastmsg: "登录之后才可以点击",
          toastIcon: "warning",
        });
        return;
      }

      this.params.min = item.min;
      this.params.max = item.max;
      // console.log(item);
      if (item.text === "我能兑换的" && item.max === 0) {
        this.params.max = 999999;
        this.params.min = 999999;
      }
      //   同步颜色
      this.sortindex = index;
      //   发请求

      //   发请求
      this.goods();
    },
    goods() {
      //   console.log(index);
      getproductsapi(this.params).then((res) => {
        console.log(this.params.type);
        if (res.code === 0) {
          this.pages = 0;
          this.list = [];
          this.product = [];
          console.log(res.data);
          const max = Math.ceil(res.data.length / 8);
          for (let i = 0; i < max; i++) {
            //不断切割res数据，
            this.list.push(res.data.splice(0, 8));
            // console.log(res.data);
          }
          // 渲染第一份的数据
          this.list[this.pages] && (this.product = this.list[this.pages]);
          // console.log(this.list, this.product);
        }
      });
    },
  },
  watch: {
    "$route.query": function () {
      //   console.log(this.$route.query.key);
      this.params.keyword = this.$route.query.key;
      //   console.log(this.params.keyword);
      this.goods();
    },
  },
  computed: {
    sortList() {
      sortList[1].max = this.$store.state.user.coin;
      return sortList;
    },
  },
  mounted() {
    let top = document.querySelector(".footer");
    window.addEventListener("scroll", () => {
      if (getScrollTop() + getClientHeight() >= getScrollHeight() - 240) {
        // console.log("1");
        if (this.pages >= this.list.length - 1) {
          return;
        }
        // 节流思想设置一个开关，一段时间只执行一次
        // 节流是让一个动作在一段时间内，只会做一次
        // 需要一个开关，如果点了一下，就让这个开关关闭，启用定时，在一段时间后开启这个开关
        // 每次要做动作之前，先判断开关是否是开启的
        if (!this.isshowpage) {
          this.isshowpage = true;
          console.log("1");
          setTimeout(() => {
            console.log("2");
            this.isshowpage = false;
          }, 3000);
          console.log("3");
          this.pages++;
          // console.log(this.pages);
          this.list[this.pages] && this.product.push(...this.list[this.pages]);
        }
        console.log("4");
      }
    });
  },
};
</script>
<style lang="less" scoped>
.filter {
  ul {
    display: flex;
    padding: 20px 0;
    li {
      margin-right: 25px;
      cursor: pointer;
      &:first-child {
        font-weight: 700;
      }
      &:nth-child(n + 2) {
        color: #999;
      }
      &.active {
        color: #0a328e;
      }
    }
  }
}
</style>
